import React, { useState, useEffect, useRef } from "react";
import { CommonModal } from "@/views/components/CommonModal";

import Typography from "@/pages/OrderModule/common/components/Typography";

import { SimpleTable } from "@/views/components/SearchTable/index";
import { Button, Alert, Image, Popconfirm } from "antd";
import CommonZjfImg, { imgStyle } from "@/views/components/CommonZjfImg";
import Style from "./index.module.less";

export default React.memo(({ visible, onCancel, onOk, onDelete, dataSource, zIndex }) => {
	//  渲染 供应商 sku 图片 和 文字
	const InfoRender = (item, isStore = false) => {
		return (
			<div className="flex">
				{isStore ? (
					<CommonZjfImg img={item.storeSkuImage} storeId={item.storeId} />
				) : (
					<Image src={item.sysSkuImage} style={imgStyle} />
				)}
				<div className="flex-column">
					<span className={Style.preview_sku_text}>尺寸：{isStore ? item.storeSize : item.sysSize}</span>
					<span className={Style.preview_sku_text}>颜色：{isStore ? item.storeColor : item.sysColor}</span>
					<span className={Style.preview_sku_name}>{isStore ? item.storeSkuName : item.sysSkuName}</span>
				</div>
			</div>
		);
	};

	const columns = [
		{
			name: "系统商品信息",
			code: "sysSku",
			width: "45%",
			render: (_, record) => {
				return InfoRender(record, false);
			}
		},
		{
			name: "供应商商品信息",
			code: "sysSku",
			width: "45%",
			render: (_, record) => {
				return InfoRender(record, true);
			}
		},
		{
			name: "操作",
			code: "action",
			width: "10%",
			render: (_, record, index) => {
				return (
					<Popconfirm
						placement="leftTop"
						title="确定删除该组匹配关系吗？"
						onConfirm={() => {
							onDelete(record, index);
						}}
						onCancel={() => {}}
					>
						<Button type="link">删除</Button>
					</Popconfirm>
				);
			}
		}
	];
	const tableKey = "SystemGoodsMatchIntelligentMatchTablePreviewMatch";
	const searchSimpleTableProps = {
		tableKey,
		rowKey: "uuid",
		// ///
		dataSource,
		columns,
		footer: false
	};

	return (
		<CommonModal zIndex={zIndex} title={{ title: "匹配预览" }} open={visible} width="1072px" okText="确定匹配" onCancel={onCancel} onOk={onOk}>
			<div>
				<Alert
					showIcon
					message={
						<Typography as="s1">
							1、匹配商品、修改商品会把含有该商品的“待审核”订单替换为最新的商品；
							<br />
							2、高级匹配——有涉及到组合商品的更换匹配，对订单暂时无影响，如有需要，可去订单处理页面进行手动修改商品——换货操作。
						</Typography>
					}
				/>
				<br />
			</div>
			<SimpleTable key={tableKey} {...searchSimpleTableProps} />
		</CommonModal>
	);
});
